<template>
  <div class="box">
    <header class="header">
      <p>配配</p>
    </header>
    <div class="content">
      
        <baidu-map class="map" center="成都">
         <img class="findPerson" src="@/../public/img/peipei/peipei.png" alt="游戏">
        </baidu-map>

       <transition :duration="1000"><p class="PeiState">{{peimsg}}</p></transition> 
       
    </div>
  </div>
</template>


<style lang='scss'>
.header{
  p{
    font-size: 0.18rem;
    color: #000000;
    font-weight: 600;
    margin-left: 0.245rem;
    margin-top: 0.405rem;
  }
}
.content{
  .map {
    width: 3.45rem;
    height: 3.45rem;
    border: 0.03rem solid #d4250d;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 0.15rem;
    position: relative;
    margin-top: 0.46rem;
  }
  .findPerson{
    width: 1.905rem;
    height: 1.905rem;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border: 0.02rem solid #d84;
    border-radius: 50%;
    padding: .35rem;
    box-sizing: border-box;
    transition:width 2s;
  }
  .findPerson:hover{
    width: 3rem;
    height: 3rem;
    padding: .85rem
  }
  .PeiState{
    font-size: 0.16rem;
    color: #666666;
    font-family: PingFang-SC-Medium;
    position: fixed;
    bottom: 1.135rem;
    left: 1.5rem;
  }
}

</style>


<script>
export default {
  data () {
    return {
        peimsg:'正在配配.'
    }
  },
  mounted () {
    let timer1 = setInterval(()=>{
      if(this.peimsg.length > 10){
        this.peimsg = '正在配配.'
      }else{
        this.peimsg += '.' 
      }
      
    },1000)
    
  }


}
</script>

